<template>
	<shop-page :style="{ '--color': vuex_config.themeColor1 }" :shopUserId="shopUserId" @changeUserData="changeUserData" v-if="shopUserId?true:false">
		<view class="shop_bottom" slot="shop-bottom">
			<view class="classification">
				<view :class="{ 'classification-css': true, 'classification-color': actIndex == -1 ? false : true }" @click="bindSub(-1)">全部</view>
				<view
					:class="{ 'classification-css': true, 'classification-color': index == actIndex ? false : true }"
					v-for="(item, index) in catList"
					:key="index"
					@click="bindSub(index, item.pk_id)"
				>
					{{ item.name }}
				</view>
			</view>

			<view class="store-data">
				<view class="store-item" v-for="(item, index) in dataList" :key="index" @click="onGo(item)">
					<view class="store-image"><image :src="item.logo"></image></view>
					<text class="u-line-2 store-title">{{ item.product_name || item.name }}</text>
					<view class="store-money">
						<view class="money-info">
							<text class="money-title">￥{{ item.price | priceFmt }}</text>
						</view>
					</view>
				</view>
			</view>
			<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
		</view>
	</shop-page>
</template>

<script>
import { pagingMixin } from '@/mixins/pagingMixin.js';
import shopPage from '../components/shopPage/index';
import { pageShare } from '@/mixins/pageShare';
export default {
	components: {
		'shop-page':shopPage
	},
	mixins: [pagingMixin,pageShare],
	data() {
		return {
			catList: [],
			actIndex: -1,
			shopUserId: null,
			prodUrl: '',
			userData:{}
		};
	},
	onLoad: function(options) {
		this.shopUserId = Number(options.pk_id);
		this.initPages();
		this.$initDataList();
		this.customShareParams()
	},
	filters: {
		priceFmt: function(price) {
			if (price) {
				price = parseFloat(price);
				var intPrice = parseInt(price);
				if (price - intPrice > 0) {
					return price.toFixed(2);
				} else {
					return intPrice;
				}
			} else {
				return 0;
			}
		}
	},

	onReachBottom: function() {
		this.loadMore();
	},
	methods: {
		// 初始化数据
		initPages(id) {
			Promise.all([
				this.$resPost('GetFavouriteClass', {
					users_id: this.shopUserId,
					page_size: 100
				}),
			]).then(res => {
				this.catList = res[0].data || [];
			});
		},
		// 初始化商品列表
		$initDataList() {
			this.$loading();
			this.dataList = [];
			this.dataListParams = {
				page: 1,
				init: false, // 是否加载过(初始化过)
				loadMore: true, // 是否可继续加载
				loading: true, // 是否在加载，用于加载结束前禁止再次加载
				len: 0
			};
			let params = {
				page: this.dataListParams.page,
				users_id: this.shopUserId
			};
			if (this.actIndex > -1) {
				params.type = this.catList[this.actIndex].pk_id;
			}
			this.$resPost('GetUsersFavouriteList', params).then(res => {
				this.prodUrl = 'GetUsersFavouriteList';
				if (res.data.length <= 0 && this.actIndex < 0) {/*重置刷新列表的时候，没有收藏的商品且没有选择小店商品分类*/
					this.prodUrl = 'GetProductList';
					this.$resPost('GetProductList', {
						page: this.dataListParams.page
					}).then(res1 => {
						this.handleRequest(res1.data, res1.pageCount);
						this.$hide();
					});
				} else {
					this.handleRequest(res.data, res.pageCount);
					this.$hide();
				}
			});
		},
		loadMore() {
			let pageParams = this.dataListParams;
			if (pageParams.loading) return;
			if (!pageParams.loadMore) return;
			this.dataListParams.loading = true;
			let params = {
				page: this.dataListParams.page
			};
			if (this.prodUrl == 'GetUsersFavouriteList') {
				params.users_id = this.shopUserId;
				if (this.actIndex > -1) {
					params.type = this.catList[this.actIndex].pk_id;
				}
			}
			this.$resPost(this.prodUrl, params).then(res => {
				this.handleRequest(res.data, res.pageCount);
			});
		},
		// 请求处理
		handleRequest(data, pageCount) {
			let pageParams = this.dataListParams;
			if (pageCount > pageParams.page) {
				pageParams.page++;
			} else {
				pageParams.loadMore = false;
			}
			this.dataList = this.dataList.concat(data.map((item)=>{
				if(item.product_img){
					item.logo = item.product_img.split(',')[0]
				}
				return item
			}));
			this.$nextTick(() => {
				pageParams.loading = false;
				pageParams.init = true;
				pageParams.len = this.dataList.length;
				this.dataListParams = pageParams;
			});
		},
		onGo(item) {
			this.$toProd({ prodType: 1, pk_id:this.prodUrl == 'GetUsersFavouriteList'?item.fk_pro_id : item.pk_id });
		},

		// 点击分类
		bindSub(idx) {
			this.actIndex = idx;
			this.$initDataList();
		},
		changeUserData (item) {
			this.userData = {...item}
		},
		// 微信小程序分享(好友)
		onShareAppMessage: function() {
			return this.getShareAppMessage();
		},
		onShareTimeline: function() {
			return this.getShareTimeline();
		},
		// 设置当前产品页的分享参数
		customShareParams() {
			if(this.userData.pk_id){
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route; //获取当前页面路由
				if(this.userData.store_status != 1){
					curRoute = 'page/index/index'
				}
				let curParam = routes[routes.length - 1].options; //获取路由参数
				this.shareParams = {
					title: `你的好友${this.userData.nickname}邀请你进入他的小店`,
					path:curRoute,
					query: curParam,
					imgUrl: this.userData.headimgurl || this.vuex_business.logo
				};
				this.onShareByH5();
			}else{
				setTimeout(()=>{
					this.customShareParams()
				},500)
			}
		},
	}
};
</script>

<style lang="scss" scoped>
	.shop_bottom{
		padding: 0 26rpx;
	}
.set-function {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

.set-function-item {
	display: flex;
	align-items: center;
}

.function-name {
	color: #333333;
	font-size: 32rpx;
	font-weight: 500;
	margin-left: 33rpx;
}

.store-image {
	width: 330rpx;
	height: 250rpx;
	margin-bottom: 10rpx;
}

.store-title {
	// display: block;
	width: 330rpx;
	color: #333;
	font-size: 30rpx;
	padding: 0rpx 20rpx;
	text-align: left;
	// overflow: hidden;
	font-size: 30rpx;
}

.store-money {
	padding: 0 20rpx;
}

.money-info {
	display: flex;
	align-items: center;
}

.money-title {
	display: inline-block;
	color: $sww-theme-price;
	font-size: 36rpx;
	margin-right: 10rpx;
	margin-top: 10rpx;
}

.store-money {
	display: flex;
	align-items: center;
}

.money-go {
	font-size: 20rpx;
	color: #b9b9b9;
}

.store-data {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

	&:after {
		content: '';
		width: 50%;
	}
}

.store-item {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 20rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 0 10rpx 5rpx #f5f5f5;
}

.classification {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30rpx;
}

.classification-css {
	line-height: 0rpx;
	padding: 25rpx 30rpx;
	background-color: var(--color);
	font-size: 26rpx;
	border: 1rpx solid var(--color);
	margin-right: 20rpx;
	color: #ffffff;
	border-radius: 7rpx;
	margin-bottom: 20rpx;
}

.classification-color {
	color: var(--color);
	border: 1rpx solid var(--color);
	background-color: #ffffff;
}
</style>
